<template>
  <div class="frame-background">
    <div class="frame">
      <div class="text">
          青为国际有限公司
      </div>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <!-- prop，传入 Form 组件的 model 中的字段  -->
        <el-form-item label="账号" prop="userId">
            <!-- 使用主表单ruleform里的userId键值  -->
          <el-input type="text" v-model="ruleForm.userId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { mapMutations } from 'vuex';

export default {
  name: 'Register',
  data() {
    const checkUserId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'));
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    // const validatePass2 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'));
    //   } else if (value !== this.ruleForm.pass) {
    //     callback(new Error('两次输入密码不一致!'));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      ruleForm: {
        userId: '',
        password: '',
      },
      rules: {
        userId: [
          // validatpr,验证规则，表单逻辑
          // trigger,表单触发类型‘blur’失去焦点触发，‘change’内容改变就触发，可以[blur+change]
          { validator: checkUserId, trigger: 'blur' },
        ],
        password: [
          { validator: validatePass, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
  //   ...mapMutations(['changeLogin']),
  //   handleSubmit(name) {
  //     // eslint-disable-next-line consistent-return
  //     this.$refs[name].validate((valid) => {
  //       let val = {
  //         userId: this.ruleForm.userId,
  //         password: this.ruleForm.password,
  //       };
  //       if (valid) {
  //         this.$ajax.post('/home', val).then((res) => {
  //           console.log(res);
  //           if (res.data.code === 200) {
  //             this.initUserInfo();
  //           } else {
  //             this.$message.error('用户名不存在或者密码错误');
  //           }
  //         });
  //       } else {
  //         return false;
  //       }
  //     });
  //   },
  //   initUserInfo() {
  //     this.$ajax.get('/assets/JSON/userId.json').then((res) => {
  //       // const userInfo = res.data.data // 获取后端的data值
  //       // 把输入框的值存入localStorage 中
  //       localStorage.setItem('userInfo', JSON.stringify(userInfo));
  //       // 通过commit 调用mutations中单方法 mutations方法就是传递的值
  //       this.$store.setItem('changeUserInfo', JSON.stringify(userInfo));
  //       // 完成的操作
  //       this.$router.push({ path: '/home' });
  //       this.$Message.success('登录成功');
  //     });
  //   },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid === this.ruleForm) {
          this.$router.push({ path: '/home' });
        } else {
          alert('登录失败');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">



.frame-background {
  position:fixed;
  top: -200px;
  left: 0;
  background-image:url(../../public/img/登录背景.jpg) ;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  min-width: 1000px;
  zoom: 1;
  background-color: #fff;
  z-index:-10;
  width:100%;
  min-height:1300px;
 }
.frame {
  background: #eee;
  width: 500px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform:translate(-50%,-50%);
  border-radius: 10px;
}
.el-form-item {
  display: flex;
}
.text {
  display: flex;
  justify-content: center;
  padding: 15px;
}
.el-button {
  width: 100%;
}
</style>
